<template>
  <div class="app-container attrndance-page">

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="Attendance Records" name="AttendanceRecord" />
      <el-tab-pane label="Attendance Status" name="AttendanceStatus" />
     <!-- <el-tab-pane label="Attendance records by course" name="RecordsByCourse" /> -->
    </el-tabs>

    <!-- tab1 tab2 -->
    <div class="container-fluid hasTab">
      <div class="filter-container">
        <el-form ref='attendance' :model="listQuery" :rules="rule">

        <el-row align="bottom" :gutter="15">
        <el-col :md="21" >

          <el-row  class="lftGroupsBox"  :gutter="5" :type="$store.state.app.device==='desktop'?'flex':''">

          <el-col
            v-for="(items,i) in sortName"
            v-show="activeName==='AttendanceRecord'||
              (activeName==='AttendanceStatus'&&i === 0)
            "
            :key="i"
            :sm="5"
            class="ul-input"
          >

            <el-form-item :prop='items._keyName' >
            <el-select
              v-model="listQuery[items._keyName]"
              clearable
              :placeholder="items.label"
            >
              <template v-for="item in sortName[0].list[items.keyName]">
                <el-option
                  :key="i===1?item:item.id"
                  :label="i===1?item:item.typeName"
                  :value="i===1?item:item.id"
                />
              </template>

            </el-select>
          </el-form-item>
          </el-col>
          <el-col v-if="activeName==='AttendanceRecord'" :sm='10'>
            <el-date-picker
              v-model="dateRang"
              type="daterange"
              style="width: 100%;"
              value-format="yyyy-MM-dd"
              start-placeholder="Start Date"
              end-placeholder="End Date"
            />
          </el-col>
         <!-- <el-col
            v-show="activeName==='AttendanceStatus'"
            :md="5"
          >
            <el-input   placeholder="Coaches / Helpers" v-model="listQuery.userName" clearable ></el-input>
          </el-col> -->


            <el-col
               v-if="activeName==='AttendanceStatus'"
              class='flex-box between' style="align-items: flex-start;"
             >
              <el-form-item style="width:49.6%;" prop='year' >
            <el-date-picker
              v-model="listQuery.year"
              type="year"
              value-format="yyyy"
              class="ul-input clPad"
              placeholder="Year"
              style="width:100%;"
            />
            </el-form-item>
            <el-form-item  style="width:49.6%;" prop='month' >
              <el-date-picker

              :sm="10"
              :popper-class='"MonthComplet"'
              class="ul-input clPad "
                v-model="listQuery.month"
                type="month"
                value-format="MM"
                format="MM"
                style="width:100%;"
                placeholder="Month"
              />
               </el-form-item>
          </el-col>
          <!-- <el-col
            v-show="activeName==='AttendanceRecord'"
            :sm="10"
            class="ul-input"
          >
            <el-input placeholder="Title" v-model='listQuery.title'/>
              </el-col>
          <el-col
            v-show="activeName==='AttendanceRecord'"
            :sm="10"
            class="ul-input"
          >
            <el-input placeholder="Location" v-model='listQuery.venue'/>
              </el-col> -->
          <el-col

            :sm="10"
            class="ul-input"
          >
            <el-input placeholder="Name" v-model='listQuery.keyword' />
              </el-col>
             </el-row>

          </el-col>

          <el-col :md="3" class="fr flex-box center rigBtnGrouds" >
            <el-button
              type="success"
              style="margin:8px 0; padding:12px 0"
              :loading="buttonDisable"
              class="coll_70"
              @click="handleFilter"
            >
              Search
            </el-button>

          </el-col>
        </el-row>
       </el-form>

      </div>
<!-- 详情 -->
      <div v-if="popoVisible" class="poppperbg" />
      <el-popover
        v-model="popoVisible"
        popper-class="exportPopover"
        :title="msgData.h1+'/'+msgData.h2+'/'+msgData.h3"
      >
        <el-button class="fr" type="success" size="small" style="margin-bottom:10px;">Export</el-button>
        <el-table
          v-if="msgData.info"
          v-loading="msgData.info.length"
          :data="msgData.info"
          element-loading-text="Loading"
         border
         fit
         highlight-current-row
         stripe
        >
          <el-table-column label="Name" prop="lastName" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.lastName+' '+scope.row.firstName || '-' }}
            </template>
          </el-table-column>

          <el-table-column label="中文名" min-width="100" prop="tcName" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.tcName || '-' }}
            </template>
          </el-table-column>

          <el-table-column label="Status" prop="status">
            <template slot-scope="scope">
              {{ scope.row.status }}
            </template>
          </el-table-column>

          <!-- <el-table-column label="Sign In Time" min-width="100" prop="signInTime" sortable="custom">
            <template slot-scope="scope">
              <el-input v-if="scope.row.edit" v-model="scope.row.upperDate" class="edit-input" size="small" />
              <template v-else>
                {{ scope.row.signInTime | dateFormat}}
              </template>
            </template>
          </el-table-column> -->

          <el-table-column label="Type" prop="userType" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.userType || '-' }}
            </template>
          </el-table-column>

          <el-table-column :label="'Roll Call'" width="120" align="center" prop="startTime" sortable="custom">
            <template slot-scope="scope">
              <i :class="scope.row.rollCall ? 'el-icon-star-on el-icon-success' :'el-icon-star'" />
            </template>
          </el-table-column>

          <el-table-column label="Gps" min-width="100" prop="masterCoach">
            <template slot-scope="scope">
              {{ scope.row.signCoordinate || '-' }}
            </template>
          </el-table-column>

          <el-table-column
            :label="'Reason'"
            min-width="120"
            align="center"
            prop="reason"
            sortable="custom"
          >
            <template slot-scope="scope">
              {{ scope.row.reason || '-' }}
            </template>
          </el-table-column>
        </el-table>
        <!-- btn Colse -->
        <div class="btn-close t-center btm-btn-groups">
          <el-button style="margin:10px;" @click="popoVisible=false">close</el-button>
        </div>

      </el-popover>

      <el-table
        v-if="activeName==='AttendanceRecord'"
        ref="table"
        v-loading="listLoading"
        :data="list[this.activeName]"
        element-loading-text="Loading"
       border
       fit
       highlight-current-row
       stripe

        @selection-change="handleSelectionChange"
        @sort-change="sort_change"
      >
        <!-- <el-table-column
          type="selection"
          fixed="left"
          width="40"
        /> -->

        <el-table-column label="Sport" min-width="100" prop="sportName" sortable="custom">
          <template slot-scope="scope">
           <!-- <el-input v-if="scope.row.edit" v-model="scope.row.Sport" class="edit-input" size="small" /> -->
            <template >
              {{ scope.row.sportName }}
            </template>
          </template>
        </el-table-column>

        <el-table-column label="Course" min-width="130"  prop="course" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.course }}
          </template>
        </el-table-column>
        <el-table-column label="Course Detail" min-width="140" prop="courseDetails" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.courseDetails }}
          </template>
        </el-table-column>
        <el-table-column label="Title" min-width="140" prop="titleName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.titleName }}
          </template>
        </el-table-column>

        <el-table-column label="Name" min-width="180" prop="lastName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row | FilterName(['lastName','firstName']) }}
          </template>
        </el-table-column>
        <el-table-column label="中文名稱" min-width="100" prop="tcName" sortable="custom">
          <template slot-scope="scope">
           {{clearInit(scope.row,$set)}}
          {{scope.row.tcName}}
          </template>
        </el-table-column>
         <el-table-column label="Location" min-width="100" prop="locationName" sortable="custom">
           <template slot-scope="scope">
             <el-input v-if="scope.row.edit" v-model="scope.row.locationName" class="edit-input" size="small" />
             <template v-else>
               {{ scope.row.locationName || '-' }}
             </template>
           </template>
         </el-table-column>
         <el-table-column label="Date" prop="upperDate" sortable="custom">
           <template slot-scope="scope">
             {{ scope.row.upperDate }}
           </template>
         </el-table-column>

         <el-table-column label="Date of week" width="120" prop="upperWeek" sortable="custom">
           <template slot-scope="scope">
             {{ scope.row.upperWeek }}
           </template>
         </el-table-column>
        <el-table-column :label="'Time Slot'" width="120" align="center" prop="startTime" sortable="custom">
          <template slot-scope="scope">
            <el-input v-if="scope.row.edit" v-model="scope.row.startTime" class="edit-input" size="small" />
            <template v-else>
              {{ scope.row.startTime +'-'+ scope.row.endTime }}
            </template>
          </template>
        </el-table-column>

        <el-table-column :label="'Course Time'" width="120" align="center" prop="upperDuration" sortable="custom">
          <template slot-scope="scope">
            <el-input v-if="scope.row.edit" v-model="scope.row.upperDuration" class="edit-input" size="small" />
            <template v-else>
              {{ scope.row.upperDuration }}
            </template>
          </template>
        </el-table-column>

        <el-table-column :label="'Actual Time'" width="120" align="center" prop="workingHour" sortable="custom">
          <template slot-scope="scope">
            <el-input v-if="scope.row.edit" v-model="scope.row.workingHour" class="edit-input" size="small" />
            <template v-else>
              {{ scope.row.workingHour }}
            </template>
          </template>
        </el-table-column>

        <el-table-column :label="'Reason'" width="120" align="center" prop="reason" sortable="custom">
          <template slot-scope="scope">
            <el-input v-if="scope.row.edit" v-model="scope.row.reason" class="edit-input" size="small" />
            <template v-else>
              {{ scope.row.reason }}
            </template>
          </template>
        </el-table-column>

        <el-table-column :label="'Map Code'" width="100" align="center" prop="coordinate" >
          <template slot-scope="scope">
            <el-input v-if="scope.row.edit" v-model="scope.row.startTime" class="edit-input" size="small" />
            <template v-else>
              {{ scope.row.coordinate }}
            </template>
          </template>
        </el-table-column>

      </el-table>
      <el-table
        v-else-if="activeName==='AttendanceStatus'"
        ref="Statustable"
        v-loading="listLoading"
        :data="list[this.activeName]"
        element-loading-text="Loading"
       border
       fit
       highlight-current-row
       stripe

        @selection-change="handleSelectionChange"
        @sort-change="sort_change"
      >
        <el-table-column label="Sport" min-width="100" prop="sportName">
          <template slot-scope="scope">
            {{ scope.row.sportName || '-' }}
          </template>
        </el-table-column>
       <!-- <el-table-column :label="'Course Name'" width="120" align="center" prop="reviewSession" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.courseName }}
          </template>
        </el-table-column>
        <el-table-column label="Course Details" min-width="180" prop="category" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.courseDetails }}
          </template>
        </el-table-column> -->
        <el-table-column :label="'Year'" width="120" align="center" prop="year" >
          <template slot-scope="scope">
            {{clearInit(scope.row,$set)}}
            {{ scope.row.year }}
          </template>
        </el-table-column>
        <el-table-column :label="'Month'" width="120" align="center" prop="signInTime" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.month }}
          </template>
        </el-table-column>
       <!-- <el-table-column :label="'startTime'" width="120" align="center" prop="startTime" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.startTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column :label="'endTime'" width="120" align="center" prop="endTime" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.endTime | dateFormat }}
          </template>
        </el-table-column> -->

        <el-table-column label="Name" width="180" prop="lastName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row | FilterName(['lastName','firstName']) }}
          </template>
        </el-table-column>
        <el-table-column label="中文名稱" min-width="160" prop="tcName" sortable="custom">
          <template slot-scope="scope">
          {{scope.row.tcName}}
          </template>
        </el-table-column>
        <el-table-column label="Course Time Total" min-width="150" prop="totalDuration" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.totalDuration}}
          </template>
        </el-table-column>
        <el-table-column label="Actual Time Total" width="150" prop="acDuration" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.acDuration }}
          </template>
        </el-table-column>
        <el-table-column label="Total No. of lesson" width="165" prop="totalSession" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.totalSession
}}
          </template>
        </el-table-column>
        <el-table-column label="Actual Total No. of lesson" width="215" prop="acSession" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.acSession }}
          </template>
        </el-table-column>


        <!-- <el-table-column fixed="right" label="" :formatter="sportMedicineFormatLink">
          <template slot-scope="scope">
            <div style="text-align: center;">
              <el-button slot="reference" type="success" size="mini" style="min-width:auto" @click="popoVisible = true">
                View
              </el-button>
            </div>
          </template>
        </el-table-column> -->
      </el-table>

      <el-pagination
        layout="sizes, prev, pager, next"
        :page-size="listQuery.limit"
        :current-page="listQuery.page"
        :total="listQuery.total"
        class="pagination-container"
        :page-sizes="[25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <div class="btm-btn-groupss t-center">

        <a :href="exportLink"
          class="coll_50"
          @click="()=>!list[activeName].length?$message('No export list'):''"
        >
        <button type="button" class="el-button el-button--success"><span>Export</span></button>
        </a>
      </div>
    </div>

  </div>

  </div>
</template>
<script>
    import store from '@/store'
     import { getTypeCodeList
      } from '@/api/trainSchedule'
        import { queryUserList } from '@/api/setting'
    import { attendanceStatusInfoList, byRollcallInfoList, attendanceRecordInfoList } from '@/api/attendance'

    export default {
        filters: {
            statusFilter(status) {
                const statusMap = {
                    published: 'success',
                    draft: 'gray',
                    deleted: 'danger'
                }
                return statusMap[status]
            }
        },
        data() {
         var getToDay = this.getToDay()
         var tomorrow = this.getToDay(new Date().getTime() + (60 * 60 * 24 * 1000))
            return {
               popoVisible: false,
               buttonDisable: false,
               dateRang:['',''],
               rule:{
               sport: [
                          { required: true, message: 'Plese input Sport' }

                        ],
                year: [
                           { required: false, message: 'Plese input Year', }

                         ],
                month: [
                         { required: false, message: 'Plese input Month'}

                ],
                },
                sortName: [{
                      belonging: 'MISCELLANEOUS',
                      typeCode: 'SPORTS_TYPE',
                      typeName: 'Sport',
                      label: 'Sport',
                      keyName: 'sports',
                      _keyName:'sport',
                      value: '',
                       list: []
                     },
                     {
                        typeCode: 'COURSE_TYPE',
                        typeName: 'Course Name',
                        belonging: 'TRAINING',
                        label: 'Course Name',
                        keyName: 'courses',
                        _keyName:'course',
                        value: ''
                      },
                    {
                       typeCode: 'COURSE_TYPE',
                       typeName: 'Course Name',
                       belonging: 'TRAINING',
                       label: 'Title',
                       keyName: 'titles',
                       _keyName:'title',
                       value: ''
                     },
                     {
                       typeCode: 'COURSE_DETALL',
                       typeName: 'Course Detalls',
                       belonging: 'TRAINING',
                       label: 'Location',
                       keyName: 'venues',
                       _keyName:'venue',
                       value: ''
                     },
                     ],
              options: [{
                       value: 'Sport',
                       label: 'Sport'
                     }, {
                       value: 'Attendance Alog',
                       label: 'Attendance Alog Name'
                     }, {
                       value: 'Attendance Alog Details',
                       label: 'Attendance Alog Details'
                     }],
                     value: 'Sport',
              pickerOptions: {
                      },
                      value1: '',
                      value2: '',

                sportMedicineList: {
                },
                msgData: {
                  h1: '',
                  h2: '',
                  h3: '',
                  info: [],

                  listQuery: {
                    page: 1,
                    limit: 25,
                    total: 0,
                    exportToken:'',
                    uppderDate: this.getToDay(),
                    sport: '',
                    course: '',
                    courseDe: '',
                    sorting: '',
                    column: '',
                    userName: '',
                    startDate: '',
                    endDate: ''
                }
                },
                 list: {
                          AttendanceRecord: [],
                          AttendanceStatus: [],
                          RecordsByCourse: []

                       },
                athlete: { id: '', name: '' },
                listQuery: {
                    page: 1,
                    limit: 25,
                    total: 0,
                    year:'',
                    month:'',
                    uppderDate: this.getToDay(),
                    sport: '',
                    course: '',
                    courseDe: '',
                    title:'',
                    sorting: '',
                    column: '',
                    venue:'',
                    keyword:'',
                    userName: '',
                    startDate: '',
                    endDate: ''
                },
                sportScienceList: {
                    list: [],
                    listQuery: {
                        page: 1,
                        limit: 25
                    }
                },
                listLoading: true,
                activeName: 'AttendanceRecord',
                link: '/trainSchedule/add',
                summaryList: [],
                listIndexs: [],
                minWindths: [],
                userType: store.getters.userType
            }
        },
        watch: {
            activeName(val) {

              this.$route.query.tab = val
               this.activeName = val
               if( val==='attendanceRecord' || !val){debugger
                 this.rule.year[0].required = false

               }else{
                 this.rule.year[0].required = true

               }
               // this.$router.push(`${this.$route.path}?tab=${val}`)
            },
             dateRang(e) {
              // debugger
              console.log('e', e)
              this.listQuery.startDate = e[0]
              this.listQuery.endDate = e[1]
            }
        },
        mounted(e) {
                 this.listQuery.startDate = this.dateRang[0]
                 this.listQuery.endDate = this.dateRang[1]
                // debugger
        },
        computed:{
          exportLink() {
            var str='record',tabName=this.activeName, params='';

            if (tabName === 'AttendanceRecord') {
               str=  'record';
               params='?token='+ encodeURIComponent(this.listQuery.exportToken)
               +'&sport='+ this.listQuery.sport
               +'&course='+ this.listQuery.course
               +'&venue='+ this.listQuery.venue
               +'&startDate='+ this.listQuery.startDate
               +'&endDate=' + this.listQuery.endDate
               +'&keyword=' + this.listQuery.keyword
               +'&title=' + this.listQuery.title

            } else if (tabName === 'AttendanceStatus') {
                str=  'status'
               params='?token='+ encodeURIComponent(this.listQuery.exportToken)
               +'&sport='+ this.listQuery.sport
               +'&year='+ this.listQuery.year
               +'&month='+ this.listQuery.month
               +'&keyword='+ this.listQuery.keyword
            } else if (tabName === 'RecordsByCourse') {
                str=  'course'
            }
            //var Course = this.activeName==='Course'

            let url

            if(!this.list[tabName].length){
              url = 'javascript:void(0)'
              // this.$message('No export list')
            }else{
              url = process.env.VUE_APP_BASE_API + '/export/attendance/'+str+'/xls'+params
            }
            console.log("url",url,this.listQuery.year)
             return url
          }
        },
        beforeCreate() {

        },
        created() {

          this.listLoading = false
          var sortName = this.sortName
          this.$ajax({
            url:'/course/query/attendance/screen',

          }).then((res)=>{
             sortName[0].list = res.result
             this.listQuery.exportToken = res.result.exportToken
          })
            const query = this.$route.query

            if (query.tab) {
                this.activeName = query.tab || 'AttendanceRecord'
            }
        },
        methods: {
          clickMsg(row) {
            this.msgData.h1 = row.id
             this.msgData.h2 = row.locationName
              this.msgData.h3 = row.upperWeek
              this._buttonDisable(this, 'buttonDisable')
              this.byRollcallInfoList(1, row.id)
            this.popoVisible = true
          },
            fetchData(column ) {
                const tabName = this.activeName
                // this.listQuery.page = 1
                //this.listQuery.total = 0
                this._buttonDisable(this, 'buttonDisable')
                if (this.$refs.table&&!column) this.$refs.table.clearSort()
                if (tabName === 'AttendanceRecord') {
                    this.attendanceRecordInfoList(this.listQuery.page, tabName)
                } else if (tabName === 'AttendanceStatus') {
                    this.attendanceStatusInfoList(this.listQuery.page, tabName)
                } else if (tabName === 'RecordsByCourse') {
                 // this._buttonDisable(this, 'buttonDisable',true)
                   // this.attendanceRecordInfoList(this.listQuery.page, tabName)
                } else {
                    this.attendanceRecordInfoList(this.listQuery.page, tabName)
                }
            },
            responsefN(response, page, activeName) {
             this._buttonDisable(this, 'buttonDisable', true)
              if (response.status === 0) {
                        const data = response.result
                       if (activeName) {
                          this.list[activeName] = data.list
                           this.listQuery.total = data.total ? data.total : this.listQuery.total
                           this.listQuery.page = page

                           this.listLoading = false
                       } else {
                           this.msgData.info = data.list
                            this.listQuery.total = data.total ? data.total : this.listQuery.total
                           this.msgData.listQuery.page = page
                           this.msgData.listLoading = false
                       }
                    }
            },
            attendanceRecordInfoList(page, tabName) {
                var that = this
                this.listLoading = true
                if (page === 1) {
                    this.list[tabName] = []
                }

                attendanceRecordInfoList({
                    keyword: this.listQuery.keyword,
                    page: page,
                    sport: this.listQuery.sport,
                    course: this.listQuery.course,
                    title: this.listQuery.title,
                    venue: this.listQuery.venue,
                    startDate: this.listQuery.startDate,
                    endDate: this.listQuery.endDate,
                    size: this.listQuery.limit,
                    sorting: this.listQuery.sorting,
                    column: this.listQuery.column
                }).then(response => {
                    that.responsefN(response, page, tabName)
                })
            },
            attendanceStatusInfoList(page, tabName) {
                var that = this
                this.listLoading = true
               if (page === 1) {
                    this.msgData.info = []
                }
                attendanceStatusInfoList({
                    keyword: this.listQuery.keyword,
                    page: page,
                    sport: this.listQuery.sport,
                    month: this.listQuery.month,
                    year: this.listQuery.year,
                    size: this.listQuery.limit,
                    sorting: this.listQuery.sorting,
                    column: this.listQuery.column
                }).then(response => {
                   that.responsefN(response, page, tabName)
                })
            },
            byRollcallInfoList(page, lessonId) {
                var that = this
                // this.listLoading = true
                 if (page === 1) {
                    this.msgData.nfo = []
                }
                byRollcallInfoList({
                    lessonId
                }).then(response => {
                   that.responsefN(response, page)
                })
            },
            querySearchAsync(queryString, cb) {
                if (queryString === '') {
                    cb([])
                    return false
                }
                queryUserList({ name: queryString }).then(response => {
                    // var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
                    var results = []; var data = response.result
                    for (var i in data) {
                        results.push({
                            value: data[i].lastName + ' ' + data[i].firstName,
                            name: data[i].lastName + '(' + data[i].firstName + ')',
                            rollCall: 0,
                            masterCoach: 0,
                            rateCardTitle: 0,
                            id: data[i].userId
                        })
                    }
                    clearTimeout(this.timeout)
                    this.timeout = setTimeout(() => {
                        cb(results)
                    }, 200 * Math.random())
                })
            },
            handleSelect(item) {
                this.athlete.userName = item.name
                this.athlete.id = item.id
                 this.listQuery.userName = item.name
                // console.log(item)
            },

            sort_change(column) {
                this.listQuery.page = 1
                if (column.prop && column.order) {
                    this.listQuery.sorting = column.order === 'ascending' ? 0 : 1
                    this.listQuery.column = column.prop
                   this.fetchData(column)
                    // this[this.activeName.indexOf('Status')>-1?'attendanceStatusInfoList':'attendanceRecordInfoList'](1, this.activeName)
                }
                // this.showed_data = this.filtered_data.slice(0, this.page_size) // show only one page
            },
            minWidth(i, text) {
                let w = 100
                if (text.length >= 10) {
                     w = 130
                } else if (text.length < 5 && text !== '') {
                     w = 50
                } else {
                     w = 100
                }
                // const w = text.length >= 10 ? 130 : 100
                console.log(text, text.length)
                return w
            },
            // pageSize变化事件
            handleSizeChange(val) {
              this.listQuery.limit = val
              this.fetchData()
            },
            // pageNum变化事件
            handleCurrentChange(page) {
                 this.listQuery.page = page
                this.fetchData(page)
            },
            sportMedicineFormatLink(row, column) {
                return row.row.id = 1
            },
            forthSet(dateStr, pattern = '') {
                // 根据给定的时间字符串，得到特定的时间
                var dt = new Date(dateStr)
                //   yyyy-mm-dd
                var y = dt.getFullYear()
                var m = (dt.getMonth() + 1).toString().padStart(2, '0')
                var d = dt.getDate().toString().padStart(2, '0')
                if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                    return `${y}-${m}-${d}`
                } else {
                    var hh = dt.getHours().toString().padStart(2, '0')
                    var mm = dt.getMinutes().toString().padStart(2, '0')
                    var ss = dt.getSeconds().toString().padStart(2, '0')
                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                }
            },
            handleClick(tab, event) {
               // this.listLoading = true
                this.buttonDisable = false
               // this.fetchData()

               this.$refs.attendance.resetFields();
               this.list[this.activeName] = []
               this.listQuery.keyword = ''
               this.listQuery.page = 1
               this.listQuery.total = 0

            },
            handleFilter() {
              this.$refs['attendance'].validate((te)=>te?this.fetchData():'')

            },
            change_time(e) {
              console.log('333', e)
              e.pickerVisible = true
            },
        toggleSelection(rows) {
        if (rows) {
            rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
        })
        } else {
            this.$refs.multipleTable.clearSelection()
        }
        },
        handleSelectionChange(val) {
          this.multipleSelection = val
        }
        }
    }
</script>
<style lang="scss">
  body{
    .MonthComplet{
      .el-date-picker__header{
        display: none;
      }
    }
  }

</style>
<style lang='scss' scope>
    .attrndance-page{
      .lftGroupsBox{
        >div{
          margin:10px 0;
        }
      }
    .filter-container{
      .el-select{width: 100%;}
      .rigBtnGrouds >*.el-button--success{min-width: auto !important;margin:0 5px 10px 5px;}
    }
   .el-tabs--border-card{
     border: none;
       .el-table__header .cell {
      white-space: pre-line;
  }
   .el-tabs__content{}
  .el-tabs__header .el-tabs__item.is-active{
  // border-bottom-color:#f2f5f9;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  }
   }
    }

</style>
